<template>
  <div class="video-recipes-container">
    <NavBaRCom :title="'视频菜谱'"></NavBaRCom>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list :immediate-check="false" v-model="loading" offset="0" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="video-recipes-item" v-for="item in videoRecipesList" :key="item.id" @click="goDetail(item)">
          <div class="pic-video">
            <van-image lazy-load fit="cover" :src="`http://pic.angelboy.cn/web/${item.imageid}.jpg`" />
            <div class="video-icon"></div>
          </div>
          <div class="video-info">
            <div class="title">{{ item.name }}</div>
            <div class="like-collection">
              <div class="like-box">
                <span class="icon"></span>
                <span class="likeNum">{{ item.likeCount }}</span>
              </div>
              <div class="collection-box">
                <span class="icon"></span>
                <span class="collectionNum">{{ item.collectCount }}</span>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import NavBaRCom from '@/components/home-navbar-view/NavBaRCom'
import request from '@/utils/request/request'
export default {
  name: 'video-recipes',
  data() {
    return {
      lastId: 0,
      top: 0,
      videoRecipesList: [],
      isLoading: false,
      loading: false,
      finished: false
    }
  },
  components: {
    NavBaRCom
  },
  methods: {
    goDetail(item) {
      this.$router.push({
        path: `/videodetail/${item.id}`,
        query: {
          likeNum: item.likeCount,
          collectionNum: item.collectCount
        }
      })
    },
    //下拉刷新
    onRefresh() {
      this.lastId = 0
      this.videoRecipesList = []
      this.requestVideoRecipes()
    },
    //滚动加载
    async onLoad() {
      this.requestVideoRecipes()
    },

    // 请求数据
    async requestVideoRecipes() {
      const {
        data: { list: res }
      } = await request({
        url: '/public/getRecommendContentsByType.shtml',
        method: 'post',
        data: {
          id: this.lastId,
          type: 'video_recipe'
        }
      })
      if (res.length == 0) {
        this.finished = true
      }
      res.forEach((item, index) => {
        this.videoRecipesList.push(item)
        if (index == res.length - 1) {
          this.lastId = item.id
        }
      })
      this.loading = false
      this.isLoading = false
    }
  },
  created() {
    if (sessionStorage.getItem('video-data')) {
      let videoData = JSON.parse(sessionStorage.getItem('video-data'))
      this.lastId = videoData.lastId
      this.videoRecipesList = videoData.videoRecipesList
      this.top = videoData.top
      return
    }
    this.videoRecipesList = []
    this.requestVideoRecipes()
  },
  mounted() {
    window.scrollTo(0, this.top)
    document.addEventListener('scroll', () => {
      this.top = window.pageYOffset
    })
    window.addEventListener('beforeunload', () => {
      sessionStorage.removeItem('video-data')
    })
  },
  beforeDestroy() {
    // 需要保存的数据
    let obj = {
      top: this.top,
      lastId: this.lastId,
      videoRecipesList: this.videoRecipesList
    }
    sessionStorage.setItem('video-data', JSON.stringify(obj))
  }
}
</script>

<style lang="less" scoped>
.video-recipes-container {
  background-color: #f1f1f1;
  padding-top: 46px;

  .video-recipes-item {
    margin-bottom: 10px;
    .pic-video {
      height: 190px;
      padding: 0 10px;
      width: 100%;
      position: relative;

      .video-icon {
        position: absolute;
        left: 10px;
        top: 0;
        height: 100%;
        width: 355px;
        background-color: rgba(0, 0, 0, 0.3);
        background-image: url('@/assets/home/video_icon.png');
        background-position: center;
        background-size: 40px 40px;
        background-repeat: no-repeat;
        z-index: 998;
      }
    }

    .video-info {
      padding-top: 5px;
      padding-bottom: 10px;
      background-color: white;
      border-bottom-right-radius: 5px;
      border-bottom-left-radius: 5px;

      .title {
        font-size: 18px;
        line-height: 30px;
        font-weight: 500;
        color: #414141;
        text-align: center;
      }
      .like-collection {
        width: 100%;
        display: flex;
        padding-top: 5px;
        justify-content: center;
        align-items: center;
        color: #999999;

        .like-box {
          margin-right: 15px;
        }
        .like-box,
        .collection-box {
          display: flex;
          align-items: center;

          .icon {
            width: 14px;
            height: 14px;
            margin-right: 5px;
            background-size: cover;
            background-repeat: no-repeat;
          }

          span.likeNum,
          span.collectionNum {
            font-size: 14px;
          }
        }

        .like-box .icon {
          background-image: url('@/assets/home/ic_home_like.png');
        }
        .collection-box .icon {
          background-image: url('@/assets/home/ic_home_collect.png');
        }
      }
    }
  }

  .van-image {
    height: 100%;
    width: 100%;

    /deep/ .van-image__img {
      width: 100%;
      height: 100%;
    }
  }

  /deep/.van-icon {
    color: #323232;
  }
}
</style>
